<template>
  <div class="websocket-status-indicator">
    <el-tag :type="statusType" :effect="effect">
      {{ statusText }}
    </el-tag>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useWebsocketStore } from '@stores/websocketStore';
import { ElTag } from 'element-plus';

const websocketStore = useWebsocketStore();

const statusType = computed(() => {
  switch (websocketStore.connectionStatus) {
    case 'connected':
      return 'success';
    case 'connecting':
      return 'warning';
    case 'disconnected':
    case 'error':
      return 'danger';
    default:
      return 'info';
  }
});

const statusText = computed(() => {
  switch (websocketStore.connectionStatus) {
    case 'connected':
      return 'WebSocket 已连接';
    case 'connecting':
      return 'WebSocket 连接中';
    case 'disconnected':
      return 'WebSocket 已断开';
    case 'error':
      return 'WebSocket 错误';
    default:
      return 'WebSocket 未知状态';
  }
});

const effect = computed(() =>
  websocketStore.connectionStatus === 'connected' ? 'light' : 'plain'
);
</script>

<style scoped>
.websocket-status-indicator {
  display: inline-block;
}
</style>
